import React from 'react';
import { Link } from 'react-router-dom';
import {
  FormOutlined,
  DeleteOutlined,
} from '@ant-design/icons';
import moment from 'moment';

const getColumns = (props: any) => {
  const columns = [
    {
      title: 'Experience name',
      dataIndex: 'name',
      key: 'name',
      render: (_text: string, row: any) => (
        <Link to={`/policy/detail?id=${row.id as string}`}>
          <div>{row.name}</div>
        </Link>
      ),
    },
    {
      title: 'Country/Region',
      dataIndex: 'countryName',
      key: 'countryName',
    },
    {
      title: 'Author',
      dataIndex: 'author',
      key: 'author',
    },
    {
      title: 'Publish time',
      key: 'createTime',
      dataIndex: 'createTime',
      // render: (text: any) => (text ? moment(parseInt(text, 0)).format('YYYY/MM/DD') : ''),
      render: (text: any) => (text ? moment(text).format('YYYY/MM/DD') : ''),
    },
    {
      title: 'Actions',
      key: 'action',
      render: (_text: any, row: any) => (
        <span>
          <Link to={`/policy/edit?id=${row.id as string}`}
            className="cursor-pointer text-gray-500 mr-4"
          >
            <FormOutlined />
          </Link>

          <span
            className="cursor-pointer text-gray-500"
            onClick={() => props.deleteItem(row.id)}
          >
            <DeleteOutlined />
          </span>
        </span>
      ),
    },
  ];

  return columns;
};

export { getColumns };
